<template>
    <div class="abc">
        <child :ppp="arr" :checks="checks" :checkd="checkd"></child>
                <table>
                    <tr>
                        <td><input type="checkbox" v-model="checkd" @change="input1"> </td>
                        <td>产品图片</td>
                        <td>编号</td>
                        <td>品牌名称</td>
                        <td>价格</td>
                        <td>数量</td>
                        <td>操作</td>
                    </tr>
                    <tr class="abc" v-for="(item,index) of arr" :key="item._id">
                        <td><input type="checkbox" v-model="checks" :value="item" @change="input2"></td>
                        <td class="tu"><img :src="item.pic" alt=""></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        
                        <td>
                            <button @click="jian(item)" :disabled="item.num<=1">-</button>
                                {{item.num}}
                            <button @click="jia(item)">+</button>
                        </td>
                        
                        <td><button @click="del(index)" >删除</button></td>
                        <!-- <div>{{int}}</div> -->
                    </tr>
                    <tr>
                        <td colspan="7" :class="['last2',{last:arr.length!=0}]">没有更多数据了</td>
                    </tr>
                    <!-- <button @click="local2">保存</button> -->
                </table>
                <div style="text-align:center">总和:{{aaabbb}}</div>
            </div>
    
    </template>
    
    <script >
    import child from "./child.vue"
        export default{
            data () {
                return {
                    arr:JSON.parse(localStorage.getItem('yyy')) ?? [
                    {pic:'https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1122879666_1184688902_88_88.png',id:1,name:'小米',price:'500',num:"1",_id:Math.random()},
                    {pic:'https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1734787630_-1197286040_88_88.png',id:2,name:'华为',price:'600',num:"2",_id:Math.random()},
                    {pic:'https://dss0.bdstatic.com/-0U0bXSm1A5BphGlnYG/tam-ogel/-1416243231_-35211708_88_88.jpg',id:3,name:'苹果',price:'700',num:"2",_id:Math.random()},
                    ],
                    checkd:false,
                    checks:[]
            }
        },
        methods: {
            del(index){
                this.arr.splice(index,1)
                localStorage.setItem('yyy',JSON.stringify(this.arr))
            },
            input1(){
                if(this.checkd){
                    this.checks=this.arr
                }else{
                    this.checks=[]
                }
            },
            input2(){
                if(this.checks.length===this.arr.length){
                    this.checkd=true
                }else{
                    this.checkd=false
                }
            },
            jia(a){
                a.num++
            },
            jian(a){
                a.num--
            }
        },
        components: {
            child
        },
        computed: {
            aaabbb(){
                let i = this.checks.reduce((a,b)=>{
                    return a += b.num*b.price
                },0)
                return i.toFixed(2)
            },
            ccc(){
                return this.arr.length
            }
        },
        watch:{
            ccc(){
                if(this.checkd){
                    this.checks=this.arr
                }
                if(this.arr.length===0){
                    this.checkd=false
                }
                if(this.checks.length===this.arr.length){
                    this.checkd=true
                }
            }
        }

    }
    </script>
    
    <style scoped>
    *{
            margin: 0;
            padding: 0;
        }
        #app div{
            width: 600px;
            border: 1px solid;
            margin-top: 10px;
            padding: 10px;
        }
        table tr:nth-child(1){
            background-color: aqua;
            
        }
        table tr:nth-child(1) td{
            height: 20px;
            line-height: 20px;
            padding: 0 10px;
            text-align: center;
            /* width: 100px; */
            color: white;
            border: 1px solid black;
        }
        img{
            width: 40px;
            height: 40px;
            border: 0;
        }
        .tu{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        td{
            height: 60px;
            line-height: 60px;
            padding: 0 10px;
            text-align: center;
            color: black;
            border: 1px solid;
        }
        table{
            border-collapse: collapse;
            position: relative;
        }
        .last{
            display: none;
        }
        .last2{
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    </style>